<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：html插值</h1>
            <h3>可以动态渲染DOM节点，常用来处理开发者不可预知或难以控制的DOM结构
                注意：在网页上动态渲染html是比较危险的，容易造成漏洞被黑客攻击
            </h3>
            <span v-html="vh"></span>
        <h1>知识点2:2v-pre指令</h1>、
            <h3>1.它可以使代码所在节点跳过编译；2.可以利用它跳过没有指令语法的节点，可以加快速度</h3>
            <p>例子</p>
            <span>我的工资是{{price}}</span>
            <span v-pre>我的工资是{{price}}</span>
        <h1>知识点3：v-bind属性绑定</h1>
            <h3>1.文本差值不能在html属性中使用，如果我们想要动态调整属性，就需要使用v-bind进行绑定</h3>
                <p>没有使用v-bind</p>
                <p title="title">我没有进行属性绑定</p>
                <p>使用v-bind</p>
                <p v-bind:title="title">我有进行属性绑定</p>
            <h3>2.v-bind:可以省略为：</h3>
                <p :title="title">省略v-bind</p>
            <h3>3.属性也可以绑定变量、表达式、执行函数等。最后结果要符合属性自身要求</h3>
                <p>例子1：绑定变量和表达式</p>
                <button :disabled="true">点击有奖</button>
                <button :disabled="1+1==3">点击有奖</button>
                <input type="text" :placeholder="false?'请输入':'请录入'">
                <p>例子2:图片的动态绑定</p>
                <img :src="src" alt="">
            <h3>课堂实例：通过改变type来实现文本框单选框和多选框的切换</h3>
                <input :type="type">
                <button @click="type='text'">文本框</button>
                <button @click="type='radio'">单选框</button>
                <button @click="type='checkbox'">多选框</button>
            <h3>通过改变动态属性，完成字体大小和颜色的改变，用按钮实现</h3>
                <span :style="style">我是一行文字</span>
                <button @click="style='color:red;font-size:16px'">中红</button>
                <button @click="style='color:purple;font-size:32px'">大紫</button>
    </div>
</body>
</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                vh:"<span>我是动态生成的html代码</span>",
                price:10000,
                title:'123',
                src:"./cc08e2245852154ddd67a17a8960d687.png",
                type:"text",
                style:"color:red;font-size:16px"
            }
        },
    }).mount("#app")
</script>